<template>
  <el-dialog
    title="编辑"
    :visible.sync="dialogVisible"
    width="30%"
    :before-close="handleClose"
  >
    <!-- 内容区 -->
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
    >
      <el-form-item label="用户ID" prop="id">
        <el-input v-model="ruleForm.id" disabled></el-input>
      </el-form-item>
      <el-form-item label="微信昵称" prop="name">
        <el-input v-model="ruleForm.name"></el-input>
      </el-form-item>
        <el-form-item label="会员手机" prop="phone">
            <el-input v-model="ruleForm.phone"></el-input>
        </el-form-item>
        <el-form-item label="消费金额" prop="payMoney">
        <el-input v-model.number="ruleForm.payMoney"></el-input>
      </el-form-item>
      <el-form-item label="订单数量" prop="num">
        <el-input v-model.number="ruleForm.num"></el-input>
      </el-form-item>
      <el-form-item label="会员等级" prop="classData">
        <el-input v-model.number="ruleForm.classData"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="$parent.isShow = false">取 消</el-button>
      <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {chageData} from '../../../api/teacherHome'
export default {
  props:['row'],
  data() {
    return {
      dialogVisible: true,
      ruleForm: {
          id: '',
          name: '',
          phone: '',
          payMoney: '',
          num:'',
          payData:'',
        },
        rules: {
          id: [
            { required: false, trigger: 'blur' },
          ],
          name: [
            { required: true, message: '请输入微信昵称', trigger: 'change' }
          ],
          phone: [
            { required: true, message: '请选择会员手机号', trigger: 'change' }
          ],
          payMoney: [
            { required: true, message: '请输入消费金额', trigger: 'change' }
          ],
          num: [
            { required: true, message: '请输入订单数量', trigger: 'change' }
          ],
          classData: [
            { required: true, message: '请输入账户余额', trigger: 'change' }
          ],
        }
    };
  },
  // computed:{
  //   ruleForm(){
  //     return { ...this.row }
  //   }
  // },
  mounted() {
    this.ruleForm = { ...this.row }
  },
  methods: {
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          this.$parent.isShow = false
          done();
        })
        .catch((_) => {});
    },
    submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            //关闭弹窗  刷新表格  发送请求
            console.log(this.ruleForm)
            chageData(  this.ruleForm  ).then(res=>{
              if (res.code == 200){
                console.log(res)
                this.$parent.isShow = false
                this.$parent.getData()
              }
            })

          } else {
            //验证不合法，请重新输入
            return false;
          }
        });
      },
  },
};
</script>

<style>
</style>